import headerImgUploader from "../Components/headerImgUploader";
import validate from '../../libs/validate';

export default {
    components: {
        headerImgUploader
    },
    computed: {
        user() {
            return this.$store.state.user.data
        }
    },
    data() {
        return {
            liveRoomTableColumns: [{
                'title': '房间名',
                'align': 'center',
                'key': 'name',

            }, {
                'title': '房间类型',
                'align': 'center',
                'key': 'type_name',

            }, {
                'title': '主播',
                'align': 'center',
                'key': 'nickname',

            }, {
                'title': '主播手机',
                'align': 'center',
                'key': 'mobilenum',

            }, {
                'title': '创建时间',
                'align': 'center',
                'key': 'createtime',

            }, {
                'title': '操作',
                'align': 'center',
                'key': 'action',
                'action': true,
                'width': 200
            }],
            searchKey: '',
            pageCount: 0,
            pageNum: 1,
            pageLoading: false,
            liveRoomList: [],
            selectData: '',
            showModal: false,
            liveRoomForm: {
                name: '',
                live_anchor_uuid: '',
                live_room_type_uuid: ''
            },
            liveRoomFormRules: {
                name: [{
                    required: true,
                    validator: validate.name,
                    trigger: 'blur'
                }],
                live_anchor_uuid: [{
                    required: true,
                    message: '请选择主播',
                    trigger: 'change'
                }],
                live_room_type_uuid: [{
                    required: true,
                    message: '请选择房间类型',
                    trigger: 'change'
                }],
            },
            modalLoading: true,
            liveRoomTypeList:[],
            liveAnchorList:[],
            anchorLoading:false,
            roomTypeLoading:false
        }
    },
    methods: {
        /**
         * @param {Boolean} type
         * 设置确定按钮loading动画，传True或者False
         */
        changeLoadingStatus(type) {
            if (!type) {
                this.modalLoading = false;
            }
            this.$nextTick(() => {
                this.modalLoading = true;
            });
        },
        // doSearch() {
        //     this.pageNum = 1;
        //     this.getLiveRoomList();
        // },
        // clearSearch() {
        //     this.searchKey = '';
        //     this.pageNum = 1;
        //     this.getLiveRoomList();
        // },
        changePage(num) {
            this.pageNum = num;
            this.getLiveRoomList();
            document.querySelector('.single-page-con').scrollTo(0, 0)

        },
        getLiveRoomList() {
            if (this.pageLoading) return
            this.pageLoading = true;
            this.http.post(this.postUrl.doGetLiveRoomListUrl, {
                token: this.user.tokenList[0],
                pageNum: this.pageNum,
                pageSize: 20,
                key_word: this.searchKey
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.pageCount = data.data.totalRow;
                    this.liveRoomList = JSON.parse(JSON.stringify(data.data.list));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            }).then(() => {
                this.pageLoading = false;
            })
        },
        clickOK() {
            this.changeLoadingStatus(true)
            this.$refs.liveRoomForm.validate(valid => {
                if (!valid) {
                    this.changeLoadingStatus(false);
                    return
                }
                let postData = JSON.parse(JSON.stringify(this.liveRoomForm));
                postData.token = this.user.tokenList[0];
                if (this.selectData) {
                    postData.uuid = this.selectData.uuid;
                }

                this.http.post(this.postUrl.doAddOrEditLiveRoomUrl, postData).then((data) => {
                    if (data.code > -1) {
                        this.$Notice.success({
                            title: this.selectData ? '修改成功！' : '新增成功！'
                        })
                        this.showModal = false;
                        this.getLiveRoomList();
                    } else {
                        this.errorHandle(data.msg)
                    }
                    this.changeLoadingStatus(false)

                }, () => {
                    this.errorHandle()
                    this.changeLoadingStatus(false)

                })
            })
        },
        deleteRoom(param) {
            this.http.post(this.postUrl.doDeleteLiveRoom, {
                token: this.user.tokenList[0],
                uuid: param.uuid
            }).then((data) => {
                if (data.code > -1) {
                    this.$Notice.success({
                        title: '操作成功！',
                    })
                    this.getLiveRoomList()
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                this.errorHandle()
            })
        },
        getLiveRoomType() {
            if (this.roomTypeLoading) return
            this.roomTypeLoading = true;
            this.http.post(this.postUrl.doGetLiveRoomTypeListUrl, {
                token: this.user.tokenList[0],
                all:'1',
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                    this.liveRoomTypeList = JSON.parse(JSON.stringify(data.data));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                // this.errorHandle()
            }).then(() => {
                this.roomTypeLoading = false;
            })
        },
        getliveAnchor() {
            if (this.anchorLoading) return
            this.anchorLoading = true;
            this.http.post(this.postUrl.doGetAnchorListUrl, {
                token: this.user.tokenList[0],
                all:'1',
            }).then((data) => {
                console.log(data);
                if (data.code > -1) {
                        this.liveAnchorList = JSON.parse(JSON.stringify(data.data));
                } else {
                    this.errorHandle(data.msg)
                }
            }, () => {
                // this.errorHandle()
            }).then(() => {
                this.anchorLoading = false;
            })
        },
        goLiveProgram(){
                this.$router.push({
                    name:'live-ctrl-program'
                })
        },
        goLiveRoomTypePage(){
            this.$router.push({
                name: 'live-ctrl-room-type'
            })
        }
    },
    created() {
        this.liveRoomTableColumns.forEach(item => {
            if (item.isImg) {
                item.render = (h, param) => {
                    return h("img", {
                        attrs: {
                            src: this.postUrl.imgPath + param.row.icon_url
                        },
                        style: {
                            width: "40px",
                            height: "40px",
                            "margin-top": "5px"
                        }
                    });
                };
            }
            if (item.key === 'link_url') {
                item.render = ((h, param) => {
                    return h('a', {
                        attrs: {
                            href: param.row.link_url,
                            target: '_blank'

                        }
                    }, param.row.link_url)
                })
            }
            if (item.action) {
                item.render = ((h, param) => {
                    return h('div', [
                        h('Button', {
                            class: 'table-action-box',
                            style: {
                                'margin-right': '10px',
                            },
                            props: {
                                type: "primary",
                                icon: 'edit'

                            },
                            on: {
                                click: () => {
                                    this.selectData = param.row;
                                    console.log(param.row);
                                    this.$nextTick(()=>{
                                        this.liveRoomForm = {
                                            name: this.selectData.name,
                                            live_anchor_uuid: this.selectData.live_anchor_uuid,
                                            live_room_type_uuid: this.selectData.live_room_type_uuid
                                        }

                                    })
                                    this.showModal = true;
                                }
                            }
                        }, '编辑'),
                        h(
                            "Poptip", {
                                props: {
                                    confirm: true,
                                    title: "删除直播间后将一起删除该直播间下节目，确定删除?",
                                    transfer: true
                                },
                                on: {
                                    "on-ok": () => {
                                        // this.ignoreFeedback(param.row)

                                        this.deleteRoom(param.row)
                                    }
                                }
                            }, [
                                h('Button', {
                                    class: 'ignore-btn',
                                    style: {},
                                    props: {
                                        type: "error",
                                        icon: 'trash-b'
                                    },
                                    on: {
                                        click: () => {

                                        }
                                    }
                                }, '删除')
                            ]
                        )
                    ])
                })

            }
        })
        if (this.user) {
            this.getLiveRoomList()
            this.getliveAnchor()
            this.getLiveRoomType()
        }

    },
    watch: {
        user(val, old) {
            if (!old && val) {
                this.getLiveRoomList()
                this.getliveAnchor()
                this.getLiveRoomType()

            }
        },
        showModal(val) {
            if (!val) {
                setTimeout(()=>{
                    this.selectData = '';
                    this.liveRoomForm = {
                        name: '',
                        live_anchor_uuid: '',
                        live_room_type_uuid: ''
                    }
                    this.$refs.liveRoomForm.resetFields()

                },300)

            }else{
                if(this.liveRoomTypeList.length === 0){
                    this.getLiveRoomType()
                }
                if(this.liveAnchorList.length === 0){
                    this.getliveAnchor()
                }
            }
        }
    }
}
